import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input, InputNumber, Modal, Select } from 'antd'
import { transactionTypeData, paymentType } from 'utils/seletLocalData'
import { validateNumber } from '../../../utils'

const FormItem = Form.Item
const Option = Select.Option
const { TextArea } = Input

const formItemLayout = {
  labelCol: {
    span: 10,
  },
  wrapperCol: {
    span: 14,
  },
}

const modal = ({
  item = {},
  onOk,
  onOkComfirm,
  onCancelComfirm,
  detailModalType,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
  optionData,
  CompfirmVisible,
  ...modalProps
}) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      onOk()
    })
  }
  const handleOkComfirm = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        id: item.id || 1,
      }
      onOkComfirm(data)
    })
  }
  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }
  const customerAccountOption = optionData.customerAccount.map(d => <Option key={d.accountId}>{d.name}</Option>)
  const customerEntityOption = optionData.customerEntity.map(d => <Option key={d.entityId}>{d.name}</Option>)
  const transactionTypeOption = transactionTypeData.map(d => <Option key={d.value}>{d.value}</Option>)
  const paymentTypeOption = paymentType.map(d => <Option key={d.value}>{d.value}</Option>)
  const companyAccountOption = optionData.companyAccount.map(d => <Option key={d.companyAccountId}>{d.name}</Option>)
  const formData = { ...getFieldsValue() }
  const { type } = formData // 获取到当前选择的
  return (
    <div>
      <Modal {...modalOpts}>
        <Form layout="horizontal">
          <FormItem label="Type" hasFeedback {...formItemLayout}>
            {getFieldDecorator('type', {
              initialValue: item.type,
              rules: [
                {
                  required: true,
                },
              ],
            })(<Select style={{ width: '100%' }}>{transactionTypeOption}</Select>)}
          </FormItem>
          <FormItem label="Payment" hasFeedback {...formItemLayout}>
            {getFieldDecorator('payment', {
              initialValue: item.payment,
              rules: [
                {
                  required: true,
                },
              ],
            })(<Select style={{ width: '100%' }}>{type === 'Person' ? <Option key={'Cash'}>Cash</Option> : paymentTypeOption}</Select>)}
          </FormItem>
          {type === 'Entity' ? <FormItem label="Entity" hasFeedback {...formItemLayout}>
            {getFieldDecorator('Entity', {
              initialValue: item.Entity,
            })(<Select style={{ width: '100%' }}>{customerEntityOption}</Select>)}
          </FormItem> : ' '}
          {type === 'Account' ? <FormItem label="Account" hasFeedback {...formItemLayout}>
            {getFieldDecorator('account', {
              initialValue: item.account,
              rules: [
                {
                  required: true,
                },
              ],
            })(<Select style={{ width: '100%' }}>{customerAccountOption}</Select>)}
          </FormItem> : ''}
          {detailModalType === 'fromModal' ? <FormItem label="CompanyAccount" hasFeedback {...formItemLayout}>
            {getFieldDecorator('companyAccountId', {
              initialValue: item.companyAccountId,
            })(<Select style={{ width: '100%' }}>{companyAccountOption}</Select>)}
          </FormItem> : <FormItem label="CompanyAccount" hasFeedback {...formItemLayout}>
            {getFieldDecorator('companyAccountId', {
              initialValue: item.customerId,
            })(<Select style={{ width: '100%' }}>{companyAccountOption}</Select>)}
          </FormItem>}
          <FormItem label="Amount" hasFeedback {...formItemLayout}>
            {getFieldDecorator('foreignAmount', {
              initialValue: item.foreignAmount,
              rules: [
                {
                  required: true,
                },
                {
                  validator: validateNumber,
                },
              ],
            })(<InputNumber style={{ width: '100%' }} />)}
          </FormItem>
          <FormItem label="Comments" hasFeedback {...formItemLayout}>
            {getFieldDecorator('fundsComment', {
              initialValue: item.fundsComment,
            })(<TextArea rows={4} />)}
          </FormItem>
        </Form>
      </Modal>
      <Modal visible={CompfirmVisible} title="Comfirm" onOk={handleOkComfirm} onCancel={onCancelComfirm}>
        <p>Are you sure you want to report this data?</p>
      </Modal>
    </div>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  detailModalType: PropTypes.string,
  onOk: PropTypes.func,
  optionData: PropTypes.object,
}

export default Form.create()(modal)
